<template>
  <!-- 商品添加界面
  商品名称 主图 轮播图  商品分类 关键字  单位（盒 箱 袋） 商品简介 是否开启积分兑换
  详情 是否精品推荐 是否热卖 猜你喜欢  商品状态  商品的价格  划去价  销量

  商品规格 单规格 
  
  多规格 价格不同 库存不同 -->
  <div>
    <h4 class="mb20">商品添加</h4>
    <el-form :model="form" label-position="top"  :rules="rules">
      <el-form-item label="商品名称" prop="title">
        <el-input v-model="form.title" />
      </el-form-item>
      <el-form-item label="商品价格" prop="price">
        <el-input v-model.number="form.price" />
      </el-form-item>
      <el-form-item label="商品划去价">
        <el-input v-model.number="form.originPrice" />
      </el-form-item>
      <el-form-item label="商品主图">
        <el-upload
          class="avatar-uploader"
          action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
        >
          <img v-if="form.mainImg" :src="form.mainImg" class="avatar" />
          <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
        </el-upload>
      </el-form-item>
      <el-form-item label="商品轮播图">
        <el-upload
          action="/api/upload"
          list-type="picture-card"
          :on-success="bannerUpload"
          :on-preview="handlePictureCardPreview"
          :on-remove="bannerRemove"
        >
          <el-icon><Plus /></el-icon>
        </el-upload>

        <el-dialog v-model="dialogVisible">
          <img w-full :src="dialogImageUrl" alt="Preview Image" />
        </el-dialog>
      </el-form-item>
      <el-form-item label="商品分类">
        <el-select v-model="form.type" placeholder="请选择商品分类" prop="type">
          <el-option label="类型一" value="1" />
          <el-option label="类型二" value="2" />
        </el-select>
      </el-form-item>
      <el-form-item label="多规格">
        <el-switch v-model="form.hasSku" />
      </el-form-item>
      <el-form-item label="商品简介">
        <el-input v-model="form.desc" type="textarea" />
      </el-form-item>
      <el-form-item label="商品详情">
        <div style="border: 1px solid #ccc">
          <Toolbar
            style="border-bottom: 1px solid #ccc"
            :editor="editorRef"
            :defaultConfig="toolbarConfig"
            :mode="mode"
          />
          <Editor
            style="height: 500px; overflow-y: hidden;"
            v-model="valueHtml"
            :defaultConfig="editorConfig"
            :mode="mode"
            @onCreated="handleCreated"
          />
        </div>
      </el-form-item>
      <el-form-item label="是否上架">
        <el-switch v-model="form.status" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">添加商品</el-button>
        <el-button>取消</el-button>
      </el-form-item>
    </el-form>
</div>
  
</template>

<script>
import { ElMessage } from 'element-plus'
import '@wangeditor/editor/dist/css/style.css' // 引入 css
import { onBeforeUnmount, ref, shallowRef, onMounted } from 'vue'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
export default {
  data () {
    return {
      form : {
        title: '',
        mainImg: '',
        banner: [],
        type: '',
        keywords: [],
        desc: '',
        detail: '',
        status: true,
        price: '',
        originPrice: '',
        saleNum: 0,
        hasSku: true,
        sku: {}
      },
      dialogVisible: false,
      dialogImageUrl: '',
      rules: {
        title: [
          { required: true, message: '请输入商品名称', trigger: 'blur' },
          { min: 6, message: '商品名称至少包含6个字符', trigger: 'blur' },
        ],
        price: [
          { required: true, message: '请输入商品价格', trigger: 'blur' }
        ]
      }
    }
  },
  components: { Editor, Toolbar },  // 上方的工具栏   编辑区域
  methods:{
    onSubmit () {
      this.form.detail = this.editorRef.getHtml()
      console.log(this.form.detail);
      // base64是什么？  jpg png gif 的区别是什么      base64和blob数据的
    },
    handlePictureCardPreview  (uploadFile){
     
      this.dialogImageUrl = uploadFile.url
      this.dialogVisible = true
    },
    handleAvatarSuccess ( response, uploadFile) {
      this.form.mainImg = URL.createObjectURL(uploadFile.raw)
    },
    bannerRemove (file,files) {
      this.form.banner = files.map(item => item.url)
    },
    bannerUpload (response, uploadFile) {
      this.form.banner.push(uploadFile.url)
    },
    beforeAvatarUpload (rawFile) {
      if (rawFile.type !== 'image/jpeg') {
        ElMessage.error('商品主图必须是jpg格式!')
        return false
      } else if (rawFile.size / 1024 / 1024 > 2) {
        ElMessage.error('商品主图不得超过2MB!')
        return false
      }
      return true
    }

  },
  setup() {
    // 编辑器实例，必须用 shallowRef
    const editorRef = shallowRef()
    // 内容 HTML
    const valueHtml = ref('')
    onMounted(() => {})
    const toolbarConfig = {}  // 工具栏的配置

    // 编辑器的配置
    const editorConfig = { 
      placeholder: '请输入内容...',
      MENU_CONF: {
        uploadImage: {
          customUpload (file,insertFn) {
            let url = URL.createObjectURL(file)
            insertFn(url)
          }
        }
      }
     }  
     

    // 组件销毁时，也及时销毁编辑器
    onBeforeUnmount(() => {
        const editor = editorRef.value
        if (editor == null) return
        editor.destroy()
    })

    const handleCreated = (editor) => {
      editorRef.value = editor // 记录 editor 实例，重要！
    }

    return {
      editorRef,
      valueHtml,
      mode: 'default', // 或 'simple'
      toolbarConfig,
      editorConfig,
      handleCreated
    };
  }
}
</script>

<style lang="less">

.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>

